<template>
  <div class="news-disclose">
    <IndexHeader :showLang="true" />

    <div class="tip-box">
      <h4>
        <span>{{ $t('if_News_discover_accepted_reward_$5-100') }}</span
        ><img src="~/assets/img/dollar.svg" alt="" />
      </h4>
      <p
        id="copy_1"
        v-clipboard:copy="phone"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >
        1、{{ $t('Phone_discover') }}：0966809063<img
          src="~/assets/img/copy.svg"
        />
      </p>
      <p
        id="copy_2"
        v-clipboard:copy="wechat"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >
        2、{{ $t('Wechat_discover') }}：jj966809063<img
          src="~/assets/img/copy.svg"
        />
      </p>
      <p class="noneborder" v-if="$i18n.locale === 'zh'">
        3、点击
        <NuxtLink :to="$i18n.path('m/download')">
          <span class="blue-text">下载APP</span>
        </NuxtLink>
        ，在APP内进行爆料
      </p>
      <p class="noneborder" v-if="$i18n.locale === 'km'">
        3、ចុច
        <NuxtLink :to="$i18n.path('m/download')">
          <span class="blue-text">ទាញយក APP</span>
        </NuxtLink>
        ផ្តល់ព័ត៌មានតាមAPP
      </p>
    </div>
  </div>
</template>

<script>
import IndexHeader from '@/components/m/Header.vue';
import { Toast } from 'vant';

export default {
  components: {
    IndexHeader
  },

  data() {
    return {
      phone: '0966809063',
      wechat: 'jj966809063'
    };
  },

  head() {
    /* 动态配置title,meta，便于facebook爬虫 */
    return {
      title: this.$t('tnaot_title'),
      meta: [
        {
          property: 'og:image',
          content: 'https://m.tnaot.com/img/logo-256.png'
        },
        { property: 'og:title', content: this.$t('tnaot_title') },
        { name: 'keywords', content: this.$t('indexKeywords') },
        { name: 'description', content: this.$t('indexDescription') }
      ]
    };
  },

  methods: {
    onCopy() {
      Toast({
        type: 'success',
        message: this.$t('Copy_successfully')
      });
    },
    onError() {
      Toast({
        type: 'fail',
        message: this.$t('Copy_failed_try_again')
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.news-disclose {
  background-color: #fff;

  .tip-box {
    margin-top: 88px;
    padding: 0 28px;

    h4 {
      font-size: 32px;
      color: #0c0c1c;
      height: 80px;
      overflow: hidden;
      line-height: 80px;

      span {
        font-weight: bold;
        float: left;
      }

      img {
        float: left;
        margin: 12px 0 0 6px;
        width: 48px;
      }
    }

    p {
      font-size: 28px;
      height: 104px;
      line-height: 104px;
      color: rgba(12, 12, 28, 1);
      border-bottom: 2px solid rgba(12, 12, 28, 0.04);

      img {
        float: right;
        margin: 30px 0 0 0;
        width: 32px;
      }
    }

    &::after {
      display: block;
      content: '';
      width: 16px;
      height: 8px;
      background: url('~assets/img/icon_arrow.png') no-repeat center center;
      position: absolute;
      top: -8px;
      right: 100px;
      z-index: 99;
    }
  }

  .blue-text {
    color: #1a88ee;
  }
}
</style>
